import React, { Component } from "react";
import { message, Pagination } from "antd";
import { stampToDate } from "../../utils/index";
import { Link } from "react-router-dom";
import "./index.less";

export default class Recruit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rankCount: 0,
      rankList: [],
      rankPage: 1,
      rankTotal: 0,
      currentPage: 1
    };
  }

  request = window.request;

  componentDidMount() {
    this.getRankList(this.state.rankPage);

    const isLogin = sessionStorage.getItem("account");
    if (isLogin) {
      this.getRankCount();
    }
  }

  getRankList = page => {
    this.request("/mk2/teammining/list", {
      method: "GET",
      body: {
        currentPage: page,
        showCount: 10
      },
      customMsg: true
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list) {
          const rankList = json.data.list.map((item, index) => {
            item.key = index;
            return item;
          });
          this.setState({
            rankList,
            rankPage: page,
            rankTotal: json.data.count
          });
        }
      }
    });
  };

  getRankCount = () => {
    this.request("/mk2/teammining/self", {
      method: "GET"
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({ rankCount: json.data });
      }
    });
  };

  render() {
    const isLogin = sessionStorage.getItem("account");
    const { rankList, rankTotal, rankPage, rankCount } = this.state;
    return (
      <div className="rank-container">
        {isLogin ? (
          <div className="rankTitle">
            {rankCount ? (
              <div>
                您当前多元挖矿排名第<span>{rankCount.orderNo}</span>
                名,已遥遥领先,继续保持
              </div>
            ) : (
              <div>您当前未开启多元挖矿</div>
            )}
          </div>
        ) : (
          <div className="rankLogin">
            <Link to="/signin">登录</Link> , 查看挖矿排名
          </div>
        )}
        <div className="miningRank">
          <div className="rankWrapper">
            <ul className="rankList">
              <li className="rankHeader">
                <span className="rank">排名</span>
                <span className="username">账号</span>
                <span className="realName">姓名</span>
                <span className="miningCount">多元挖矿量</span>
              </li>
              {rankList.map((item, index) => (
                <li key={item.id}>
                  <span className="rank">
                    {(rankPage - 1) * 10 + index + 1}
                  </span>
                  <span className="username">{item.mobile || item.mail}</span>
                  <span className="realName">{item.realName}</span>
                  <span className="miningCount">{item.volumeStr}</span>
                </li>
              ))}
            </ul>
            {rankList.length > 0 && (
              <div className="deadline">
                截止时间:
                {stampToDate(rankList[0].sortDate * 1, "YYYY年MM月DD日")}
              </div>
            )}
            {rankTotal > 0 && (
              <Pagination
                current={rankPage}
                total={rankTotal}
                onChange={this.getRankList}
              />
            )}
          </div>
        </div>
      </div>
    );
  }
}
